<template>
	<view>
		<!-- 我的钱包 -->
		<cus-navbar navbar :title="$t('index129')"></cus-navbar>

		<view class="main-padding">
			<view class="gap-30"></view>
			<view class="flex flex-center daohang">
				<view class="flex-1 text-center " @click="tabs(2)" :class="type==2?'active':''">静态</view>
				<view class="flex-1 text-center" @click="tabs(3)" :class="type==3?'active':''">动态</view>
				<view class="flex-1 text-center" @click="tabs(1)" :class="type==1?'active':''">待收益</view>
			</view>
			<view class="mt-24 mine-data1 flex flex-direction justify-between" v-show="current==1">
				<view class="text-center">
					<navigator url="/pages/wallet/wallet">
						<!-- 我的资产 -->
						<view class="color-3e size-24">{{$t('index32')}}</view>
						<view class="size-42 text-bold color-black">{{mineData.balance2||0}}</view>
					</navigator>
				</view>
				<view class="mine-data-bot flex align-center">
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/recharge">
							<view class="flex align-center">
								<image src="../../static/imgs/6.png" class="img-28"></image>
								<!-- 充值 -->
								<view class="ml-10 size-24">{{$t('index35')}}</view>
							</view>
						</navigator>
					</view>
					
					<view class="mine-data-line"></view>
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/convert">
							<view class="flex align-center">
								<image src="../../static/imgs/9.png" class="img-28"></image>
								<!-- 互转 -->
								<view class="ml-10 size-24">{{$t('index37')}}</view>
							</view>
						</navigator>
					</view>
					<view class="mine-data-line"></view>
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/exchange">
							<view class="flex align-center">
								<image src="../../static/imgs/7.png" class="img-28"></image>
								<view class="ml-10 size-24">{{$t('index38')}}</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>
			<view class="mt-24 mine-data1 flex flex-direction justify-between" v-show="current==2">
				<view class="text-center">
					<navigator url="/pages/wallet/wallet">
						<!-- 我的资产 -->
						<view class="color-3e size-24">{{$t('index32')}}</view>
						<view class="size-42 text-bold color-black">{{mineData.balance3||0}}</view>
					</navigator>
				</view>
				<view class="mine-data-bot flex align-center">
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/recharge">
							<view class="flex align-center">
								<image src="../../static/imgs/6.png" class="img-28"></image>
								<!-- 充值 -->
								<view class="ml-10 size-24">{{$t('index35')}}</view>
							</view>
						</navigator>
					</view>
					
					<view class="mine-data-line"></view>
					<view class="flex-1 flex-center">
						<navigator url="/pages/wallet/withdraw">
							<view class="flex align-center">
								<image src="../../static/imgs/8.png" class="img-28"></image>
								<!-- 提现 -->
								<view class="ml-10 size-24">{{$t('index36')}}</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>
			
			
			<view class="main-card mt-30" v-if="list.length>0">
				<view class="" v-for="(item,index) in list" :key="index">
					<view class="flex justify-between align-center size-28">
						<view>{{item.content}}</view>
						<view>{{item.price}}</view>
					</view>
					<view class="flex justify-between align-center size-24 color-71 mt-10">
						<view>{{item.created_at}}</view>
						<!-- <view>-0.54</view> -->
					</view>
					<view class="main-line mt-30 mb-30" v-if="(index<list.length-1)"></view>
				</view>
			</view>
			<cus-empty v-show="list.length==0"></cus-empty>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				current: 0,
				list:[],
				page:1,
				limit:10,
				loadStatus:'loading',
				type:2,
			}
		},
		computed: {
			...mapState({
				mineData: state => state.user.mineData
			}),
		},
		onLoad(e) {
			this.loadData(true)
		},
		onPullDownRefresh() {
			this.loadData(true, true)
		},
		onReachBottom() {
			if(this.loadStatus=='noMore')return
			this.page++
			this.loadData()
		},
		methods: {
			loadData(flag, refresh){
				if(flag)this.page=1
				this.loadStatus = 'loading'
				this.$api.post('/data/api.auth.invest/incomeBalanceList',{
					page:this.page,
					limit:this.limit,
					type:this.type
				}).then(res=>{
					this.list = this.list.concat(res.list)
					this.loadStatus = res.list.length==this.limit?'more':'noMore'
					if(refresh)uni.stopPullDownRefresh()
				})
			},
			tabs(e){
				this.list = []
				this.type = e
				this.loadData(true)
			},
			
		}
	}
</script>

<style lang="scss">
	

	
	.daohang{
		.active{color: #43EB95;border-bottom: 1px solid #43EB95;padding-bottom: 10rpx;}
	}
	.mine-data {
		height: 216rpx;
		background-image: url("../../static/imgs/3.png");
		background-size: 100% 100%;
		padding-top: 45rpx;
	}

	.mine-data1 {
		height: 216rpx;
		background-image: url("../../static/imgs/4.png");
		background-size: 100% 100%;
		padding-top: 45rpx;
	}

	.mine-data-bot {
		width: 100%;
		height: 72rpx;
		background-color: rgba(0, 72, 58, 0.4);
		border-radius: 0 0 10rpx 40rpx;
	}

	.mine-data-line {
		width: 1rpx;
		height: 24rpx;
		background-color: rgba(255, 255, 255, 0.4);
	}
</style>